<template>
  <div class="app-container">
    <cus-wraper>
      <cus-filter-wraper>
        <div>
          <el-input  v-model="listQuery.skillId" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入技能Id" style="width:200px;margin: 0 10px 0 0;" clearable></el-input>
<!--ToDoo         <el-input :disabled="true" v-model="listQuery.userId" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入用户Id" style="width:200px;margin: 0 10px 0 0;" clearable></el-input>-->
          <el-select filterable v-model="listQuery.status" class="filter-item" placeholder='请选择是否启用' style="width: 200px;margin: 0 10px 0 0;">
            <el-option v-for="item in flagList2" :key="item.key" :label="item.lab" :value="item.key"></el-option>
          </el-select>
          <el-date-picker v-model="beginData1" type="datetime" value-format="timestamp" placeholder="搜索起始时间" style="margin-right: 10px;width: 200px;"></el-date-picker>
          <el-date-picker v-model="endData1" type="datetime" value-format="timestamp" placeholder="搜索结束时间" style="margin-right: 10px;width: 200px;"></el-date-picker>
          <el-button type="primary" @click="getList" icon="el-icon-search">查询</el-button>
          <el-button type="info" @click="reGetList" icon="el-icon-search">重置</el-button>
        </div>
      </cus-filter-wraper>
      <div class="table-container">
        <el-table v-loading="listLoading" :data="list" ref="itsmDataTable" size="mini" fit element-loading-text="Loading"
                  highlight-current-row align="center">
          <el-table-column label="技能Id" prop="skillId" align="center"></el-table-column>
          <el-table-column label="用户Id" prop="userId" align="center"></el-table-column>
          <el-table-column label="头像" prop="groupPicture" align="center">
            <template slot-scope="scope">
              <span>
                <img :src="scope.row.headPicture" alt="" style="width: 50px;height: 50px;border-radius: 25px;">
              </span>
            </template>
          </el-table-column>
          <el-table-column label="昵称" prop="nickname" align="center"></el-table-column>
          <el-table-column label="资质类型" prop="skillName" align="center"></el-table-column>
          <el-table-column label="技能截图" prop="applyPicture" align="center">
            <template slot-scope="scope"><img :src="scope.row.applyPicture" v-if="scope.row.applyPicture" preview="0" @click="outVisible = true; outImg = scope.row.applyPicture" style="width: 100px;" preview-text="技能截图"></template>
          </el-table-column>
          <el-table-column label="录音" prop="voiceExample" align="center" >
            <template slot-scope="scope">
              <svg-icon icon-class="stop" @click="videoPause()" v-if="isAmr && isAmrId===scope.row.id" style="font-size: 30px;"/>
              <svg-icon icon-class="play" @click="videoPlay(scope.row.voiceExample, scope.row.id)" v-else style="font-size: 30px;"/>
            </template>
          </el-table-column>
          <el-table-column label="接单说明" prop="remark" align="center" ></el-table-column>
          <el-table-column label="审核状态" prop="status" align="center" >
            <template slot-scope="scope">
              <el-button size="mini" type="danger" v-if="scope.row.status === 0" round>未通过</el-button>
              <el-button size="mini" type="success" v-if="scope.row.status === 1" round>已通过</el-button>
              <el-button size="mini" type="primary" v-if="scope.row.status === 2" round>待审核</el-button>
            </template>
          </el-table-column>
            <el-table-column align="center" v-if="this.global_checkBtnPermission(['sys:user:edit','sys:user:delete'])" label="操作" width="300">
            <template slot-scope="scope">
              <el-button  size="mini" type="primary" @click="handleUpdate(scope.row)" icon="el-icon-edit" plain>
               审核
              </el-button>
              <el-button size="mini" type="danger" @click="handleUpdate(scope.row)" icon="el-icon-edit" plain>
                禁用
              </el-button>
              <cus-del-btn  @ok="handleDelete(scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList"/>
      </div>

      <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogVisible" width="40%" v-dialogDrag @close="handleDialogClose">
        <el-form ref="dataForm" :model="form" :rules="rules" label-width="120px" class="demo-ruleForm">
          <el-dialog
            v-dialogDrag
            width="60%"
            title="查看图片"
            :visible.sync="innerVisible"
            append-to-body>
            <img :src="innerImg" style="width: 100%;" alt="">
          </el-dialog>
          <el-form-item label="技能Id:" prop="username">{{form.skillId}}</el-form-item>
          <el-form-item label="用户Id:" prop="username">{{form.userId}}</el-form-item>
          <el-form-item label="头像:" prop="username">
            <img :src="form.headPicture" alt="" style="width: 50px;height: 50px;border-radius: 25px;">
          </el-form-item>
          <el-form-item label="昵称:" prop="username">{{form.nickname}}</el-form-item>
          <el-form-item label="资质类型:" prop="username">{{form.skillName}}</el-form-item>
          <el-form-item label="技能Id:" prop="username">{{form.skillId}}</el-form-item>
          <el-form-item label="技能截图:" prop="username">
            <img :src="form.applyPicture" v-if="form.applyPicture" preview="0" @click="innerVisible = true, innerImg = form.applyPicture" style="width: 100px;" preview-text="技能截图">
          </el-form-item>
          <el-form-item label="录音:" prop="username">
<!--            <i class="el-icon-video-play" @click="videoPlay(form.voiceExample)" style="font-size: 30px;"></i>-->
            <svg-icon icon-class="stop" @click="videoPause()" v-if="isAmr && isAmrId===form.id" style="font-size: 30px;"/>
            <svg-icon icon-class="play" @click="videoPlay(form.voiceExample, form.id)" v-else style="font-size: 30px;"/>
           </el-form-item>
          <el-form-item label="接单说明:" prop="username">{{form.remark}}</el-form-item>
          <el-form-item label="审核:" prop="groupOrder">
            <el-radio v-model="form.status" label='1'>通过</el-radio>
            <el-radio v-model="form.status" label='0'>拒绝</el-radio>
          </el-form-item>
          <el-form-item v-if="form.status === '0'" label="拒绝原因:" prop="groupSwitch">
            <el-select filterable v-model="form.reason" placeholder="请选择拒绝原因">
              <el-option
                v-for="item in listReason"
                :key="item.id"
                :label="item.reasonDetail"
                :value="item.reasonDetail"
                :disabled="item.isDisable===1">
              </el-option>
            </el-select>
            <el-input v-model="form.reason" style="width: 200px;margin-right:10px;" placeholder='手动输入拒绝原因'></el-input>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false, reason=''"> 取 消 </el-button>
          <el-button type="primary" @click="submitForm"> 确 认 </el-button>
        </span>
      </el-dialog>

      <el-dialog
        v-dialogDrag
        width="60%"
        title="查看图片"
        :visible.sync="outVisible">
        <img :src="outImg" style="width: 100%;" alt="">
      </el-dialog>

    </cus-wraper>
  </div>
</template>

<script>
  import { getSysUserPage, addSkillGroup, deleteSysUser, getReason, getSelectAll } from '@/api/qualification/userApply'
  import { client } from '@/utils/ali-oss'
  let BenzAMRRecorder = require('benz-amr-recorder');
  export default {
    data() {
      return {
        dialogVisible: false,
        innerVisible: false,
        innerImg: '',
        outVisible: false,
        outImg: '',
        list: [],
        listReason: [],
        listLoading: true,
        total: 0,
        beginData1: undefined,
        endData1: undefined,
        listQuery: {
          page: 1,
          pageSize: 10,
          skillId: undefined,
          userId: undefined,
          status: undefined,
          beginData: undefined,
          endData: undefined,
        },
        flagList2: [{ key: undefined, lab: '全部状态' },{ key: '0', lab: '未通过' }, { key: '1', lab: '通过' }, { key: '2', lab: '审核中' } ],
        flagText2:undefined,
        form: {
          id: undefined, //主键ID
          groupName: undefined, //账号
          groupPicture: undefined, //账号
          reason: undefined, //账号
          status: undefined, //账号
          groupOrder: 1, //账号
          groupSwitch: 1, //账号
        },
        dialogStatus: '',
        titleMap: {
          update: '资质认证',
          create: '资质认证'
        },

        dialogVisibleImg1: false,
        uploadDisabled:false,
        options: [{
          value: 0,
          label: '拒绝理由0'
        }, {
          value: 1,
          label: '拒绝理由1'
        }],
        changeValue: 1,
        searchVal: '',
        amr: undefined,
        isAmr:false,
        isAmrId:0,
        reason: 0,
        status: '1',
        rules: {
          groupName: [
            {required: true, message: '请输入表情名称', trigger: 'blur'},
          ],
          groupPicture: [
            {required: true, message: '请上传表情图片', trigger: 'blur'},
          ],
        }
      }
    },
    created() {
      this.getList()
      this.getSelectAll()
    },
    methods: {
      getList() {
        this.listLoading = true;
        this.listQuery.beginData = !this.beginData1?undefined:this.beginData1/1000
        this.listQuery.endData = !this.endData1?undefined:this.endData1/1000
        getSysUserPage(this.listQuery).then(response => {
          this.list = response.data.records;
          this.total = response.data.total;
          this.listLoading = false;
        })
      },
      getSelectAll(){
        getSelectAll().then(response => {
          let typesId = response.data.records.find(item => item.types ==='资质申请拒绝理由').id
          this.getReason(typesId)
        })
      },
      getReason(typesId) {
        getReason(typesId).then(response => {
          this.listReason = response.data.records;
        })
      },
      reGetList(){
        this.listQuery.skillId= undefined
        this.listQuery.status= undefined
        this.listQuery.beginData= undefined
        this.listQuery.endData= undefined
        this.getList()
      },
      handleCreate() {
        this.resetForm()
        this.dialogStatus = 'create';
        this.dialogVisible = true
      },
      handleUpdate(row) {

        // row)
        this.form = Object.assign({}, row);
        this.form.status = String(this.form.status)
        this.dialogStatus = 'update';
        this.dialogVisible = true
      },
      handleDelete(row) {
        let id = row.id
        deleteSysUser(id).then(response => {
          if (response.code === 0) {
            this.getList();
            this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
          }
        })
      },
      submitForm() {
        let data = {
          "status": Number(this.form.status),
          "reason": this.form.status === '1'?'': this.form.reason,
          "applyId": this.form.id
        }
        // data)
        // return
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            addSkillGroup(data).then(response => {
              if (response.code === 0) {
                this.getList();
                this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });;
                this.dialogVisible = false
              } else {
                this.$message({
                message: response.message,
                type: 'error'
            });
              }
            }).catch(err => {

            })
          }
        })
      },
      resetForm() {
        this.form = {
          id: undefined, //主键ID
          groupName: undefined, //账号
          groupPicture: undefined, //账号
          groupOrder: 1, //账号
          groupSwitch: 1, //账号
        }
        if(this.$refs.upload){
          this.$refs.upload.clearFiles();
        }
        if(this.$refs.upload2){
          this.$refs.upload2.clearFiles();
        }
        this.uploadDisabled = false;
        this.uploadDisabled2 = false;
      },
      // 监听dialog关闭时的处理事件
      handleDialogClose() {
        this.resetForm();

        if (this.$refs['dataForm']) {
          this.$refs['dataForm'].clearValidate() // 清除整个表单的校验
        }
      },
      toggleSelection(){
        // 一键删除
        const _selectData = this.$refs.itsmDataTable.selection;
        if(_selectData.length === 0){return}
        let selectArry = [];
        _selectData.map(row => {
          selectArry.push(row.id)
        });

        deleteSysUser(selectArry).then(response => {
          if (response.code === 0) {
            this.getList();
            this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
          }
        })
      },

      // 上传图片
      Upload(file) {
        const that = this;
        const names = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
        if (!names.includes(file.file.type)) {this.$message.error('不支持的格式!'); return }
        const fileName = Date.now() + '-' + file.file.name;
        client().put(fileName, file.file,).then(result => {
          that.form.groupPicture = result.url
        }).catch(err => {

        })
      },
      // 删除图片
      handleRemove(fileList) {
        this.form.groupPicture = '';
        this.uploadDisabled = fileList.length>=1
      },
      handleLimit(file,fileList){
        this.uploadDisabled = fileList.length>=1
      },

      reload(val){
        this.form.groupPicture = '';
        this.uploadDisabled = false;
        this.$refs.upload.clearFiles();
      },
      handleChange(value) {

      },
      videoPause(){
        this.isAmr = false
        this.amr.stop()
      },
      videoPlay(url, id){
          this.isAmr = true
          this.isAmrId = id
          let that = this
          if(this.amr !== undefined ){this.amr.stop()}
          this.amr = new BenzAMRRecorder()
          this.amr.initWithUrl(url).then(function () {
            that.amr.onAutoEnded(function() {
              that.isAmr = false
            });
            that.amr.play()
          })
      },

    }
  }
</script>
<style lang="scss" scoped>
  // .el-upload--picture-card 控制加号部分
  .disabled /deep/ .el-upload--picture-card {
    display: none;
  }
  .disabled2 /deep/ .el-upload--picture-card {
    display: none;
  }
  .uploadImg, .uploadImg2{
    width:148px;
    height: 148px;
    border-radius: 6px;
  }
  .reload{
    position: absolute;
    bottom: 0;
    left: 160px;
  }
  .search-line{
    margin-bottom: 10px;
    padding: 10px;
    background: white;
  }
  .filter-wraper{
    display: flex;
    justify-content: space-between;
  }
  .table-container /deep/ .el-table .cell{
    display:flex;
  }
  .app-container /deep/ .el-form-item{margin-bottom: 0;}
</style>
